<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/top.css" />
    <link rel="stylesheet" href="../css/item.css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/axios.min.js"></script>
  </head>
  <body>
    <div class="top">
      <div class="top_left">
        <span class="right"> 下拉查看类目 </span>
        <dl>
          <dd><a href="#">礼包手办</a></dd>
          <dd><a href="#">手办模型</a></dd>
          <dd><a href="#">数码电子</a></dd>
          <dd><a href="#">新品专区</a></dd>
          <dd><a href="#">服饰日用</a></dd>
          <dd><a href="#">玩家共创</a></dd>
        </dl>
      </div>
      <div class="top_center"><a href="../index.html"></a></div>

      <ul class="top_right">
        <li>
          <a href="./login.html">请QQ登录</a>
        </li>
        <li>
          <a href="#">我的订单</a>

          <dl>
            <dd><a href="#">我的订单</a></dd>
            <dd><a href="#">我的收藏</a></dd>
            <dd><a href="#">我的优惠券</a></dd>
            <dd><a href="#">我的道具</a></dd>
          </dl>
        </li>
        <li>
          <a href="#">周边公告</a>

          <dl>
            <dd><a href="#">疫情影响暂停发货</a></dd>
            <dd><a href="#">关于《DNF官方艺术设定》</a></dd>
            <dd><a href="#">CDk系统已恢复</a></dd>
            <dd><a href="#">游戏道具领取时效</a></dd>
            <dd><a href="#">活动商品结算通知</a></dd>
          </dl>
        </li>
        <li>
          <a href="#">帮助中心</a>

          <dl>
            <dd><a href="#">购物指南</a></dd>
            <dd><a href="#">配送方式</a></dd>
            <dd><a href="#">售后服务</a></dd>
          </dl>
        </li>
        <li>
          <a href="#">手机周边</a>
        </li>
      </ul>
    </div>
    <div style="background-color: #f0f0f0; width: 100%">
      <div class="menubar">
        <ul>
          <li><a href="#">商城首页</a></li>
          <li><a href="#">全部商品</a></li>
          <li><a href="#" style="border-right: none">领取游戏道具</a></li>
        </ul>
        <div class="search">
          <input type="text" placeholder="全站搜索" />
        </div>
      </div>
    </div>
    <!-- 商品详情 -->
    <div id="box">
        <div class="small">
          <img src="../images/da2.jpg" alt="">
          <div class="mask"></div>
      </div>
      <div class="big">
          <img src="../images/da2.jpg" alt="">
      </div>
      <div class="described">
        <p>
          虎虎生威礼盒,迎春上新,购买即可获得全新限定宠物,可从[肥鲸/井盖宠物中选
            择获得1个、虎年光环*1]预售商品,预计2022年7月上旬陆续发货,请勇士耐心等
            候,谢谢。
        </p>
        <h4>
          <span>¥</span> <span>${goods.pprice}</span>
          <span>超值价</span>
        </h4>
        数量：<input type="number" min="1" value="1" id="nub"/>
        <button onclick="addCar()">加入购物车</button>
      </div>
      </div>
    </div>
  </body>
  <script>
    //获取头部 ul列表的第一个qq登录
    let qqLi = document.querySelector(".top .top_right li:nth-child(1)");
    if (localStorage.getItem("id")) {
      qqLi.innerHTML = `欢迎您 <a href='#' onclick='quit()'>退出</a>`;
      qqLi.style.fontSize = "12px";
      function quit() {
        localStorage.clear();
        location.reload();
      }
    } else {
      qqLi.innerHTML = '<a href="./login.html">请QQ登录</a>';
      qqLi.style.fontSize = "14px";
    }
let num = window.location.search;
      var obj = new URLSearchParams(num);
      let id = obj.get("id");
    //展示商品详情
    detail();
    async function detail() {
      //获取商品id
      
      // 根据商品 id 获取商品详情接口
      let detailAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
      let p1 = await axios.get(detailAPI, { params: { id } });
      console.log(p1.data.data);
      let goods = p1.data.data;
      var str = `
      <div class="goods_details">
        <div class="small">
            <img src=${goods.pimg} alt="">
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src=${goods.pimg} alt="">
        </div>
        <div class="described">
          <p>
            ${goods.pdesc}
          </p>
          <h4>
            <span>¥</span> <span>${goods.pprice}</span>
            <span>超值价</span>
          </h4>
          数量：<input type="number" min="1" value="1" id="nub"/>
          <button onclick="addCar()">加入购物车</button>
        </div>
      </div>
      `;
      box.innerHTML = str;
      zoom();
    }

    function zoom() {
      //获取小框和大框和大图片
      let small = document.querySelector(".goods_details .small");
      let bigImg = document.querySelector(".goods_details .big img");
      let big = document.querySelector(".goods_details .big");
      //获取遮罩层
      let mask = document.querySelector(".goods_details .small .mask");
      //放大镜效果
      console.log(small);
      small.onmouseenter = function () {
        mask.style.display = "block";
        big.style.display = "block";

        document.onmousemove = function (e) {
          //黄色方块相对于小图片左上角移动
          //鼠标移动x方向
          var mouseX = e.clientX - small.offsetLeft - mask.offsetWidth / 2;
          //鼠标移动y方向
          var mouseY = e.clientY - small.offsetTop - mask.offsetHeight / 2;

          //添加边界
          //左边界
          if (mouseX < 0) mouseX = 0;
          //上边界
          if (mouseY < 0) mouseY = 0;
          //右边界
          if (mouseX > 300) mouseX = 300;
          //下边界
          if (mouseY > 300) mouseY = 300;
          // if()
          mask.style.left = mouseX + "px";
          mask.style.top = mouseY + "px";
          bigImg.style.left = -4 * mouseX + "px";
          bigImg.style.top = -4 * mouseY + "px";
        };
      };
      small.onmouseleave = function () {
        mask.style.display = "none";
        big.style.display = "none";
        document.onmousemove = null;
      };
    }
    function addCar() {
      // 给用户购物车中添加商品 接口
      if (localStorage.getItem("id")) {
        console.log(nub.value);
        let carAPI = "http://jx.xuzhixiang.top/ap/api/add-product.php";
        axios
          .get(carAPI, {
            params: {
              uid: localStorage.getItem("id"),
              pid: id,
              pnum: nub.value,
            },
          })
          .then((r) => {
            window.open("./car.html");
            console.log(r.data);
          });
      } else {
        alert("请先登录");
        window.open("./login.html");
      }
    }

    $(".top_left").hover(
      function () {
        $(".top_left dl").slideDown();
      },
      function () {
        $(".top_left dl").slideUp();
      }
    );
    $(".top_right li:eq(1)").hover(
      function () {
        $(".top_right li:eq(1) dl").slideDown();
      },
      function () {
        $(".top_right li:eq(1) dl").slideUp();
      }
    );
    $(".top_right li:eq(2)").hover(
      function () {
        $(".top_right li:eq(2) dl").slideDown();
      },
      function () {
        $(".top_right li:eq(2) dl").slideUp();
      }
    );
    $(".top_right li:eq(3)").hover(
      function () {
        $(".top_right li:eq(3) dl").slideDown();
      },
      function () {
        $(".top_right li:eq(3) dl").slideUp();
      }
    );
  </script>
</html>
